<template>
  <div class="customer">
    <el-row class="bgc pd-20">
      <el-col :span="24">客户概况</el-col>
    </el-row>
    <el-form :label-position="labelPosition" label-width="140px" :model="loanInfo" :inline="true">
      <el-form-item label="企业名称">
        <el-input v-model="loanInfo.compName" disabled />
      </el-form-item>
      <el-form-item label="统一社会信用代码">
        <el-input v-model="loanInfo.compCreditCode" disabled />
      </el-form-item>
      <el-form-item label="法人代表">
        <el-input v-model="loanInfo.bossName" disabled> </el-input>
      </el-form-item>
      <el-form-item label="注册地址">
        <el-input v-model="loanInfo.regAdress" disabled> </el-input>
      </el-form-item>
      <el-form-item label="经营行业">
        <el-input v-model="loanInfo.businessLine" disabled />
      </el-form-item>
      <el-form-item label="主营业务">
        <el-input v-model="loanInfo.mainBusiness" disabled />
      </el-form-item>
      <el-form-item label="营业场地来源">
        <el-input v-model="loanInfo.businessAddressSource" disabled> </el-input>
      </el-form-item>
      <el-form-item label="实际经营地址">
        <el-input v-model="loanInfo.businessAddress" disabled> </el-input>
      </el-form-item>
    </el-form>

    <el-row class="bgc">
      <el-col :span="24">主要资产情况</el-col>
    </el-row>
    <el-row class="bgc pd-20">
      <el-col :span="24">房产信息</el-col>
    </el-row>
    <div v-for="(item, index) in houseOwners" :key="index">
      <el-form :label-position="labelPosition" label-width="140px" :model="item" :inline="true">
        <el-form-item label="权属情况">
          <el-input v-model="item.ownership" disabled />
        </el-form-item>
        <el-form-item label="权利人名称">
          <el-input v-model="item.name" disabled />
        </el-form-item>
        <el-form-item label="权利人证件号">
          <el-input v-model="item.idNo" disabled />
        </el-form-item>
        <el-form-item label="房产份额">
          <el-input v-model="item.share" disabled />
        </el-form-item>
      </el-form>
    </div>
    <el-row class="bgc">
      <el-col :span="24"> 影像采集</el-col>
    </el-row>
    <div class="box_flex">
      <div class="box" v-for="(item, index) in imgList" :key="index">
        <el-image :src="`http://116.228.78.26:52800/nymanagerFile/${item}`" lazy style="width: 200px; height: 200px" v-if="item != '' && item != null" />
        <div v-else class="img_box">暂无图片</div>
      </div>
    </div>
    <el-row class="bgc pd-20">
      <el-col :span="24">车产</el-col>
    </el-row>
    <div v-for="(item, index) in carInfos" :key="index">
      <el-form :label-position="labelPosition" label-width="140px" :model="item" :inline="true">
        <el-form-item label="所有权人">
          <el-input v-model="item.owner" disabled />
        </el-form-item>
        <el-form-item label="品牌型号">
          <el-input v-model="item.brand" disabled />
        </el-form-item>
        <el-form-item label="购买时间">
          <el-input v-model="item.buyDate" disabled />
        </el-form-item>
        <el-form-item label="购买价格">
          <el-input v-model="item.buyPrice" disabled />
        </el-form-item>
        <el-form-item label="担保余额(元)">
          <el-input v-model="item.loan" disabled />
        </el-form-item>
        <el-form-item label="车牌号码">
          <el-input v-model="item.carNo" disabled />
        </el-form-item>
      </el-form>
    </div>
    <el-row class="bgc pd-20">
      <el-col :span="24">其他资产</el-col>
    </el-row>
    <div v-for="(item, index) in otherAssets" :key="index">
      <el-form :label-position="labelPosition" label-width="140px" :model="item" :inline="true">
        <el-form-item label="资产类型">
          <el-input v-model="item.assetsType" disabled />
        </el-form-item>
        <el-form-item label="资产名称">
          <el-input v-model="item.assetsName" disabled />
        </el-form-item>
        <el-form-item label="所有权人">
          <el-input v-model="item.owner" disabled />
        </el-form-item>
        <el-form-item label="评估价值">
          <el-input v-model="item.estimatedValue" disabled />
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script setup>
import { ArrowLeft } from "@element-plus/icons-vue";
import { reactive, ref } from "vue";
import router from "@/router";

const route = useRoute();
const labelPosition = ref("right");
const state = reactive({
  loanInfo: {}, //担保信息
  togetherInfoList: {},
  otherAssets: {},
  houseOwners: {},
  carInfos: {},
  carInfoList: {},
  imgList: [],
  lists: [], //展示菜单项
});
const { loanInfo, houseOwners, carInfos, otherAssets, imgList } = toRefs(state);

const props = defineProps({
  dataFrom: {
    type: Object,
    required: true,
  },
});
onMounted(() => {
  setTimeout(() => {
    loanInfo.value = props.dataFrom.customerProfile;
    houseOwners.value = props.dataFrom.houseOwners;
    carInfos.value = props.dataFrom.carInfos;
    otherAssets.value = props.dataFrom.otherAssets;
    if (houseOwners.value[0].imgPath != null && houseOwners.value[0].imgPath != "") {
      imgList.value = houseOwners.value[0].imgPath.split(",");
    } else {
      houseOwners.value[0].imgPath = "";
      imgList.value = houseOwners.value[0].imgPath.split(",");
    }
  }, 400);
});
</script>
<style lang="scss" scoped>
.bgc {
  background: #f2f2f2;
  margin-bottom: 5px;
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  // padding-left: 20px;
}
.pd-20 {
  padding-left: 20px;
}
:deep(.el-form-item--default) {
  margin-bottom: 5px;
  width: 40%;
}
:deep(.el-select) {
  width: 100%;
}
:deep(.el-form-item) {
  margin-right: 120px;
}
.flexImg {
  width: 100%;
  padding-left: 20px;
  margin-bottom: 5px;
}
.box_flex {
  display: flex;
}
.box {
  margin-right: 20px;
}
.img_box {
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  line-height: 200px;
  text-align: center;
}
</style>
